<template>
<div class="wrapper">
    <div class="container-fluid myTables">
        <div class="page-title-box">
            <div class="btn-group ">
                <ol class="breadcrumb hide-phone p-0 m-0">
                    <li class="breadcrumb-item">
                        <router-link to="/">{{$t('breadcrumb.index')}}</router-link>
                    </li>
                    <li class="breadcrumb-item">{{$t('breadcrumb.copy')}}</li>
                    <li class="breadcrumb-item active">{{$t('breadcrumb.copy.my')}}</li>
                </ol>
            </div>
        </div>

        <div id="main" class="card-box myhidden">
            <div class="card-title d-flex">
                <span class="m-t-0 header-title">{{$t('breadcrumb.copy.my')}}</span>
                <div class="toolbar ml-auto">
                    <router-link to="/follow-me/my/history" class="btn btn-gradient">{{$t('btn.copy.my.history')}}</router-link>
                </div>
            </div>
            <table class="table table-striped table-hover table-sm gdlb">
                <thead class="thead-light">
                <tr>
                    <th>{{$t('title.index')}}</th>
                    <th>{{$t('title.mt4')}}</th>
                    <th>{{$t('title.signal.account')}}</th>
                    <th>{{$t('title.copy.type')}}</th>
                    <th>{{$t('title.copy.ratio')}}</th>
                    <th>{{$t('title.copy.time')}}</th>
                    <th>{{$t('title.status')}}</th>
                </tr>
                </thead>
                <tbody>
                <tr class="hidden" aria-hidden="true" tabindex="-1"></tr>
                <tr v-for="(record,index) in records" :key="record.id">
                    <th scope="row">{{index+1}}</th>
                    <td>{{record.mt_account}}({{record.broker}})</td>
                    <td>{{record.fix_login}}({{record.fix_broker}})</td>
                    <td>{{record.fix_type}}</td>
                    <td>{{record.direction}}</td>
                    <td>{{record.create_time}}</td>
                    <td>{{record.status}}</td>
                </tr>
                </tbody>
            </table>
        </div>
        <div class="comTable followMe">
            <ul class="b_flex b_column">
                <li class="b_flex b_wrap" v-for="record in records" :key="record.id">
                    <div class="w-10 b_flex b_topcenter fir_box">
                        <div class="b_flex w-8">
                            <span class="nr">{{$t('title.copy.time')}}</span>
                            <p>{{record.create_time}}</p>
                        </div>
                    </div>
                    <div class="w-5">
                        <div class="b_flex">
                            <span>{{$t('title.mt4')}}</span>
                            <p>{{record.mt_account}}</p>
                        </div>
                        <div class="b_flex">
                            <span>{{$t('title.copy.type')}}</span>
                            <p>{{record.fix_type}}</p>
                        </div>
                        <div class="b_flex">
                            <span>{{$t('title.status')}}</span>
                            <p>{{record.status}}</p>
                        </div>
                    </div>
                    <div class="w-5">
                        <div class="b_flex">
                            <span>{{$t('title.signal.account')}}</span>
                            <p>{{record.fix_login}}</p>
                        </div>
                        <div class="b_flex">
                            <span>{{$t('title.copy.ratio')}}</span>
                            <p>{{record.direction}}</p>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
    </div>
</div>
</template>

<script>
import qs from 'querystring';

export default {
    name: "followMeMy",
    data() {
        return {
            records: [],
            t: {
                "ok": this.$t('btn.ok'),
                "cancel": this.$t('btn.cancel'),
                "msg": this.$t('msg.copy.close'),
                "msg_suc": this.$t('msg.ajax.success'),
                "msg_err": this.$t('msg.ajax.fail')
            }
        }
    },
    created() {
        this.init();
    },
    methods: {
        init() {
            const vm = this;
            const api = vm.api;
            const http = vm.$http;
            http.get(api + 'FixApply/fixlist')
                .then(function (response) {
                    const data = response.data;
                    if ('0' === data.code) {
                        vm.records = data.data;
                    }
                })
                .catch(function (error) {
                    console.log(error)
                });
        },
        stop(id) {
            const vm = this;
            swal({
                title: vm.t.msg,
                icon: 'info',
                buttons: {
                    ok: {
                        text: vm.t.ok,
                        className: 'btn btn-gradient',
                    },
                    rt: {
                        text: vm.t.cancel,
                        className: 'btn btn-link text-secondary',
                    }
                }
            }).then((value) => {
                if (value === 'ok') {
                    const vm = this;
                    const api = vm.api;
                    const http = vm.$http;

                    let params = {
                        "id": id
                    };

                    http.post(api + 'FixApply/closeapply', qs.stringify(params))
                        .then(function (response) {
                            const data = response.data;
                            if ('0' === data.code) {
                                swal({
                                    title: vm.t.msg_suc,
                                    icon: 'success',
                                    button: {
                                        text: vm.t.ok,
                                        className: 'btn btn-gradient',
                                    }
                                }).then(() => {
                                    this.init();
                                })
                            } else {
                                swal({
                                    title: vm.t.msg_err,
                                    text: data.msg,
                                    icon: 'info',
                                    button: {
                                        text: vm.t.ok,
                                        className: 'btn btn-gradient',
                                    }
                                })
                            }
                        })
                        .catch(function (error) {
                            console.log(error)
                        });
                }
            })
        }
    }
}
</script>
